import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Routes, Route } from 'react-router';
import App from './App';
import FormikDemo from './formik/FormikDemo';
import FormikYupDemo from './formik/FormikYupDemo';
import FormikPower from './formik/FormikPower';
import CssInJs from './css-in-js/CssInJs';
import CharkraUi from './charkra-ui/CharkraUi';
import YouHua from './youhua/YouHua';
import ReduxDemo from './redux-demo/ReduxDemo';

const RoutesMap = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" index element={<App />} />
        <Route path="formik/*" element={<FormikDemo />} />
        <Route path="formik/yup" element={<FormikYupDemo />} />
        <Route path="formik/yup/yuppower" element={<FormikPower />} />
        <Route path="cssinjs" element={<CssInJs />} />
        <Route path="charkra-ui" element={<CharkraUi />} />
        <Route path="youhua" element={<YouHua />} />
        <Route path="redux" element={<ReduxDemo />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RoutesMap;
